<template>
    <div class="selectKind">
        <loginHeader style="position: fixed; top: 0; z-index: 50;"></loginHeader>
        <div style="background:#ffffff; position: fixed; top: 38px;left: 0; right: 0; z-index: 20;">
            <div class="goodsOnWrapHeader">
                <img class="logo" src="./../../assets/img/login/LoginLOGO.png" alt="">
                <p class="goodsOnWrapHeaderTxt">商品发布</p>
            </div>
        </div>
        <div style="height: 125px;"></div>
        <div class="content">
            <!-- 提示 -->
            <div class="contentA">
                <p>
                    <i class="el-icon-warning" style="color: #2a91fe;background: #FFFFFF;font-size: 17px;"></i>
                    亲，当您遇到店铺保证金、资质认证等问题时，请先确认对方的身份后再沟通，谨防上当受骗。
                </p>
            </div>
            <!-- 搜索框 -->
            <div class="contentB">
                <input type="text" v-model="sousuoVal" placeholder="可输入产品名称">
                <p class="sousuo noselect" @click="sousuo">搜索</p>
                <div v-if="isSousuoList" class="sousuoList">
                    <p>家用电器 > 冰箱</p>
                    <p>家用电器 > 冰箱</p>
                    <p>家用电器 > 冰箱</p>
                    <p>家用电器 > 冰箱</p>
                    <p>家用电器 > 冰箱</p>
                    <p>家用电器 > 冰箱</p>
                    <p>家用电器 > 冰箱</p>
                    <p>家用电器 > 冰箱</p>
                    <p>家用电器 > 冰箱</p>
                    <p>家用电器 > 冰箱</p>
                    <p>家用电器 > 冰箱</p>
                </div>
            </div>
            <!-- 选择类目 -->
            <div class="contentC">
                <!-- 第一列 -->
                <div class="selectOne noselect">
                    <p @click="selectOne(index)" v-for="(item, index) in ClassList" :class="selectOneIndex == index?'selectTrue':''">{{item.name}} <i class="el-icon-arrow-right"></i></p>
                </div>
                <!-- 第二列 -->
                <div class="selectTwo noselect" :id="isShowSelectTwo?'Block':'None'">
                    <p @click="selectTwo(index)" v-for="(item, index) in ClassListChild" :class="selectTwoIndex == index?'selectTrue':''">{{item.name}}</p>
                </div>
            </div>
            <!-- 已选项目 -->
            <div class="contentD">
                <span class="contentDone">已选项目: </span>
                <span class="contentDtwo">{{selectClass.one}}&nbsp<i class="el-icon-arrow-right"></i></span>
                <span class="contentDthree">{{selectClass.two}}</span>
            </div>
            <!--下一步,发布商品-->
            <div class="contentE" @click="toGoodsOn">下一步,发布商品</div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import  loginHeader  from "./../login/LoginHeader";
    export default {
        name: "selectKind",
        data(){
            return  {
                // 搜索框value
                sousuoVal:"",
                // 是否显示搜索框
                isSousuoList: false,
                // 控制第二列是否显示
                isShowSelectTwo: false,
                // 第一列选中的下标
                selectOneIndex: -1,
                // 第一列数据
                ClassList:[],
                // 第二列选中的下标
                selectTwoIndex: -1,
                // 第二列的数据
                ClassListChild:[],
                // 选择的类目
                selectClass:{
                    "one":"",
                    "two":""
                }
            }
        },
        components:{
            loginHeader,
        },
        methods:{
            // 选择第一列
            selectOne(index){
                // 根据下标显示对应的二级类目
                this.ClassListChild = this.ClassList[index].children;
                setTimeout(()=>{
                    this.selectTwoIndex = -1;
                },200);
                this.selectOneIndex = index;
                this.isShowSelectTwo = true;
                this.selectClass.one = this.ClassList[index].name;
                this.selectClass.two = "";
            },
            // 选择第二列
            selectTwo(index){
                this.selectTwoIndex = index;
                this.selectClass.two = this.ClassListChild[index].name;
            },
            // 搜索
            sousuo(){
                console.log(this.sousuoVal);
                // 获取搜索结果
                axios.post('',{})
                .then((response)=>{
                    console.log(response);
                }).catch((error)=>{
                    console.log(error);
                });
                // 显示搜索框
                this.isSousuoList = true;
                console.log(2)
            },
            // 下一步,发布商品
            toGoodsOn(){
                this.global.startLoading();
                setTimeout(()=>{
                    this.global.endLoading();
                    this.$router.push("/goodsOn");
                },500);
            }
        },
        mounted() {
            // 获取类目
            axios.post('/productCategory/list/withChildren',{})
            .then((response)=>{
                console.log(response);
                // 赋值给一级类目
                this.ClassList = response.data.data;
            }).catch((error)=>{
                console.log(error);
            });
            // 页面绑定点击事件,取消搜索框
            $(document).bind('click', (e)=> {
                if(e.target.className == "sousuo noselect"){
                    // 点击的是搜索
                }else{
                    // 点击的不是搜索隐藏搜索出来的list列表
                    this.isSousuoList = false;
                }
            });
        }
    }
</script>

<style scoped>

    /*头部*/
    /*logo部分*/
    .goodsOnWrapHeader{
        width: 1200px;
        height: 90px;
        margin: 0 auto;
        background: #ffffff;
        overflow: hidden;
    }
    .goodsOnWrapHeader .logo{
        width: 61px;
        height: 56px;
        margin-top: 19px;
        float: left;
    }
    .goodsOnWrapHeaderTxt{
        float: left;
        font-size:26px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        line-height: 120px;
        margin-left: 10px;
        color:rgba(51,51,51,1);
    }

    .content{
        width: 1200px;
        height: 700px;
        margin: 0 auto;
        overflow: hidden;
    }
    /* ------------------------------------------------------第一块,提示 */
    .contentA{
        width:1198px;
        height:40px;
        line-height: 40px;
        text-indent: 18px;
        font-size:14px;
        font-family:"PingFang-SC-Regular";
        color: #333333;
        font-weight: 400;
        background:#FFFFFF;
        border:1px solid #E0E0E0;
        margin-top: 29px;
        box-shadow:0px 2px 4px 0px rgba(204,204,204,0.5);
    }
    .contentB{
        height: 36px;
        margin: 20px 0 10px;
        position: relative;
    }
    .contentB input{
        width:550px;
        height:34px;
        text-indent: 10px;
        font-size:14px;
        font-family:"PingFang-SC-Regular";
        font-weight:600;
        background:rgba(255,255,255,1);
        border:1px solid rgba(199,199,199,1);
        border-radius:5px;
        margin-right: 10px;
        float: left;
    }
    .sousuo{
        display: inline-block;
        width:120px;
        height:34px;
        line-height: 34px;
        text-align: center;
        font-size:16px;
        font-family:P"PingFang-SC-Medium";
        font-weight:500;
        color:rgba(51,51,51,1);
        background:rgba(255,255,255,1);
        border:1px solid rgba(102,102,102,1);
        border-radius:5px;
        cursor: pointer;
    }
    /* .contentB p:active{
        background: rgba(253,64,11,1);
        color: #FEFEFE;
    } */
    .sousuoList{
        width:550px;
        height:221px;
        overflow: hidden;
        overflow-y: auto;
        background: white;
    }
    .sousuoList p{
        overflow: hidden;
        width: 532px;
        height: 24px;
        line-height: 24px;
        font-size:14px;
        text-indent: 10px;
        white-space: nowrap;
        font-family:"PingFang-SC-Regular";
        font-weight:600;
        color:rgba(51,51,51,1);
        cursor: pointer;
        margin: 5px 0;
    }
    .sousuoList p:hover{
        background: #F2F2F2;
    }


    /* 类目展示 */
    .contentC{
        background:rgba(255,255,255,1);
    }
    /* 第一列 */
    .selectOne{
        display: inline-block;
        width:241px;
        height:330px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(224,224,224,1);
        overflow: hidden;
        overflow-y: auto;
    }
    .selectOne p{
        height: 24px;
        line-height: 24px;
        font-size:12px;
        font-family:"PingFang-SC-Regular";
        font-weight:600;
        text-indent: 10px;
        color:rgba(51,51,51,1);
        margin: 5px 0;
        cursor: pointer;
    }
    .selectOne p:hover{
        background:rgba(242,242,242,1);
    }
    .selectTrue{
        background:rgba(242,242,242,1);
    }
    .selectOne p i{
        font-size: 14px;
        line-height: 24px;
        float: right;
        margin-right: 10px;
    }


    /* 第二列 */
    .selectTwo{
        display: inline-block;
        width:241px;
        height:330px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(224,224,224,1);
        overflow: hidden;
        overflow-y: auto;
    }
    .selectTwo p{
        height: 24px;
        line-height: 24px;
        font-size:12px;
        font-family:"PingFang-SC-Regular";
        font-weight:600;
        text-indent: 10px;
        color:rgba(51,51,51,1);
        margin: 5px 0;
        cursor: pointer;
    }
    .selectTwo p:hover{
        background:rgba(242,242,242,1);
    }

    /* 已选项目 */
    .contentD{
        height:40px;
        line-height: 40px;
        background:rgba(252,252,252,1);
        border:1px solid rgba(242,242,242,1);
        margin-top: 20px;
    }
    .contentD span{
        font-size:14px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
    }
    .contentDone{
        margin-left: 50px;
        color:rgba(153,153,153,1);
    }
    .contentDtwo, .contentDthree{
        color: #2A91FE;
    }



    /* 下一步,发布商品 */
    .contentE{
        width:220px;
        height:40px;
        line-height: 40px;
        color: #FFFFFF;
        font-size:20px;
        font-family:"PingFang-SC-Bold";
        font-weight:bold;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
        border-radius:5px;
        opacity: 0.9;
        cursor: pointer;
        text-align: center;
        position: relative;
        top: 20px;
        left: 50%;
        transform: translate(-50%);
    }
    .contentE:hover{
        opacity: 1;
    }

    #Block{
        display: inline-block;
    }
    #None{
        display: none;
    }

</style>